<template>
  <div>
    <h1>Home组件</h1>
    <hr />
    <router-link to="/home/game" tag="button" active-class="active">
      游戏
    </router-link>
    <router-link
      :to="{
        path: '/home/movie',
      }"
      tag="button"
      active-class="active">
      电影
    </router-link>
    <router-link
      :to="{
        path: '/home/news',
      }"
      tag="button"
      active-class="active">
      新闻
    </router-link>

    <br />
    <router-link to="/home/game" tag="button" replace>游戏</router-link>
    <router-link
      :to="{
        path: '/home/movie',
      }"
      tag="button"
      replace>
      电影
    </router-link>
    <router-link
      :to="{
        path: '/home/news',
      }"
      tag="button"
      replace>
      新闻
    </router-link>

    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "Home",
};
</script>

<style scoped>
button {
  margin: 10px;
}
.active {
  background: red;
  color: aliceblue;
}
</style>
